<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <script src="/html/js/util.js"></script>
    <script>
        let userId = "";
        window.onload = function () {
            userId = getQuery("userId");
            init();
        }

        async function init() {
            let sumMoney="";
            let shopList = await ajaxGet("/shop/findByUser", {userId})
            let str = "";
            for (i = 0; i < shopList.length; i++) {
                let obj = shopList[i]
                let sum=(obj.product.money)*(obj.num);
                sumMoney=(+sumMoney+sum);
                str += `<tr>
                        <td>${obj.product.name}</td>
                        <td>${obj.product.money}</td>
                        <td>${obj.product.area}</td>
                        <td><input type="text" value="${obj.num}"  onblur="update(${obj.id},this.value)"></td>
                        <td>${sum}</td>
                        <td><a onclick="del(${obj.id})">移除商品</a></td>
                        </tr>`;
            }
            getObject("showShopBody").innerHTML=str;
            getObject("sumMoney").innerText=sumMoney;
        }

        async function del(shopId){
            let info=await ajaxGet("/shop/del",{id:shopId});
            if (info=="ok"){
                init();
            }
        }

        async function update(shopId,num){
            let info=await ajaxGet("/shop/update",{id:shopId,number:num});
            if (info=="ok"){
                init();
            }
        }

        async function addOrder(){
            let sumMoney=getObject("sumMoney").innerText;
            alert(sumMoney)
            location.href=`/html/custom/addOrder.html?money=${sumMoney}`;
        }
    </script>
</head>
<body>
<span style="font-size: 30px;font-weight: bolder">您的购物车有如下商品:</span>
<div>
    <table border="1" cellpadding="0">
        <thead>
        <tr>
            <th>商品名称</th>
            <th>单价</th>
            <th>产地</th>
            <th>购买数量</th>
            <th>单项总价</th>
            <th>移除商品</th>
        </tr>
        </thead>
        <tbody id="showShopBody">
        </tbody>
    </table><br>
    购物车总价:￥<span id="sumMoney"></span><br>
    <div style="margin-top: 30px">
        <a href="/html/index.html">继续购物</a>
        <a style="margin-left: 30px" onclick="addOrder()">结账</a>
    </div>
</div>
</body>
</html>